<template>
  <div class="store-worker-wrap">
    <div class="store-worker-month-box">
      <datetime format="YYYY-MM" v-model="workerMonth" class="worker-date-time" :end-date="endDate" placeholder="全部月份"
                @on-confirm="selectWorkerMonth"></datetime>
      <img src="../../../images/drop_down.png" class="pic" onclick="return false"/>

      <span class="clear-work-Filtrate" @click="clearFiltrateWorker" v-show="showFiltrate">清空筛选条件</span>
    </div>


    <div class="store-worker-list-box">
      <div class="store-worker-list-title">
        <span class="shop-num">店员({{shopUserNum}}人)</span><span class="labor-num">员工人数({{shopWorkNum}}人)</span>
      </div>

      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        class="van-store-worker-item"
      >
        <div class="store-worker-list-item" v-for="(storeWorker,index) in workerList" :key="index">
          <div class="store-worker-list-item-con">
            <div class="shop-name">{{storeWorker.userName}}</div>
            <span class="shop-invite-num">{{storeWorker.shopLabourNum}}</span>
          </div>
        </div>
      </van-list>

    </div>

    <!--<div class="store-shop-total-num" v-show="!showFiltrate">-->
      <!--<span>门店人数总计：</span><span class="total-num">{{shopUserNum + shopWorkNum + 1}}人</span>-->
    <!--</div>-->

    <div class="load-shade-box" v-show="showShade"></div>
  </div>
</template>

<script>
  import {Datetime} from 'vux';
  import {formatDate} from "../../../config/util";
  import {getShopWorkerList} from "../../../axios/api";

  export default {
    data() {
      return {
        workerMonth: "",
        userMark: "",
        endDate: "",
        workerList: [],
        page: 1,
        size: 20,
        loading: false,
        finished: false,
        shopUserNum: "",
        shopWorkNum: "",
        showFiltrate: false,
        showShade: false
      }
    },
    created() {
      this.endDate = formatDate(new Date(), "yyyy-MM-dd");
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
    },
    methods: {
      onLoad() {
        if (!this.timer) {
          this.timer = setTimeout(() => {
            this.queryStoreWorkerList();
            this.timer = null;
          }, 500)
        }
      },
      queryStoreWorkerList() {
        let params = {
          "sgin": this.userMark,
          "page": this.page,
          "size": this.size,
          "time": this.workerMonth
        };
        this.showShade = true;
        getShopWorkerList(params).then((res) => {
          if (res.code == 0) {
            this.shopUserNum = res.data.shopUserNum;
            this.shopWorkNum = res.data.shopWorkNum;
            if (res.data.shopWorkDetailList != null && res.data.shopWorkDetailList.length > 0) {
              this.workerList = this.workerList.concat(res.data.shopWorkDetailList);

              this.loading = false;
              this.page++;
            } else {
              this.loading = false;
              if (this.workerList.length >= res.data.shopWorkDetailList.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(res.msg, "middle");
          }
          this.showShade = false;
        });
      },
      selectWorkerMonth(value) {//月份查詢
        this.workerMonth = value;
        this.showFiltrate = true;
        this.initVanList();
      },
      clearFiltrateWorker() {
        this.showFiltrate = false;
        this.workerMonth = "";
        this.initVanList();
      },
      initVanList() {
        this.page = 1;
        this.size = 20;
        this.workerList = [];
        this.loading = true;
        this.finished = false;
        if (this.loading) {
          this.onLoad();
        }
      },
    },
    components: {
      Datetime
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .store-worker-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .store-worker-month-box {
      display: flex;
      align-items: center;
      .wh(100%, 1.2rem);
      background: #FFF;
      position: fixed;
      top: 0;
      .worker-date-time {
        margin-left: 0.32rem;
        margin-right: 0.16rem;
        .size-color(0.4rem, rgba(51, 51, 51, 1));
      }
      .worker-date-time /deep/ .weui-cell__ft .vux-cell-placeholder {
        color: rgba(51, 51, 51, 1)
      }
      .worker-date-time /deep/ .weui-cell__ft .vux-cell-value {
        color: #3cafff
      }
      .pic {
        .wh(0.267rem, 0.267rem);
      }
      .clear-work-Filtrate {
        margin-left: auto;
        margin-right: 0.32rem;
        text-align: center;
        line-height: 0.587rem;
        .wh(2.4rem, 0.587rem);
        background: rgba(235, 247, 255, 1);
        border-radius: 0.293rem;
        .size-color(0.32rem, rgba(60, 175, 255, 1));
      }
    }
    .store-worker-list-box {
      position: absolute;
      top: 1.2rem;
      display: flex;
      flex-direction: column;
      .wh(100%, auto);
      .store-worker-list-title {
        display: flex;
        .wh(100%, 0.8rem);
        .size-color(0.347rem, rgba(153, 153, 153, 1));
        .shop-num {
          flex: 1;
          text-align: center;
          line-height: 0.8rem;
        }
        .labor-num {
          flex: 1;
          text-align: center;
          line-height: 0.8rem;
        }
      }
      .store-worker-list-item {
        .wh(100%, auto);
        background: #FFF;
        .store-worker-list-item-con {
          display: flex;
          align-items: center;
          .wh(96.8%, 1.333rem);
          margin-left: 0.32rem;
          border-bottom: 0.027rem solid #f5f5f5;
          .size-color(0.427rem, rgba(51, 51, 51, 1));
          .shop-name {
            flex: 1;
            text-align: center;
          }
          .store-one {
            color: #999999;
          }
          .shop-invite-num {
            flex: 1;
            text-align: center;
            font-weight: 500;
            color: rgba(60, 175, 255, 1);
          }
        }
      }
    }
    .store-shop-total-num {
      position: fixed;
      bottom: 0;
      display: flex;
      align-items: center;
      padding-left: 0.32rem;
      .wh(100%, 1.32rem);
      background: #FFF;
      .size-color(0.427rem, rgba(51, 51, 51, 1));
      .total-num {
        .size-color-weight(0.427rem, #3cafff, 500);
      }
    }
    .load-shade-box {
      position: fixed;
      z-index: 1000;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
    }
  }
</style>
